<template>
    <vue-canvas-poster :widthPixels="widthPixels" :painting="drawData" @success="success" @fail="fail"></vue-canvas-poster>
</template>

<script>
import { vueCanvasPoster } from 'vue-canvas-poster'
export default {
    name: 'CardCanvas',
    props: {
        params: Object, // 传参修改模板参数
        bgImg: String
    },
    components: {
        vueCanvasPoster
    },
    data () {
        return {
            widthPixels: 700, // 强制指定生成的图片的像素宽度
            drawData: {
                width: '700px',
                height: '389px',
                background: 'rgba(255, 255, 255, 0)',
                views: [
                    {
                        type: 'image',
                        url: require('@/assets/img/canvas/bg.png'),
                        css: {
                            top: '0px',
                            left: '0px',
                            width: '700px'
                        }
                    },
                    {
                        type: 'text',
                        text: '来不及解释了',
                        css: {
                            top: '105px',
                            left: '35px',
                            fontSize: '36px',
                            fontWeight: 'bold',
                            width: '330px',
                            textAlign: 'center'
                        }
                    },
                    {
                        type: 'text',
                        text: '上车就关注',
                        css: {
                            top: '190px',
                            left: '120px',
                            fontSize: '40px',
                            color: '#fff'
                        }
                    },
                    {
                        type: 'text',
                        text: '你想看的劲爆内容我都有！',
                        css: {
                            top: '278px',
                            left: '40px',
                            fontSize: '24px'
                        }
                    },
                    {
                        type: 'image',
                        url: require('@/assets/img/canvas/qrcode1.png'),
                        css: {
                            top: '115px',
                            right: '70px',
                            width: '140px',
                            height: '140px'
                        }
                    }
                ]
            }
        }
    },
    computed: {
    },
    created () {
        this.initDraw()
    },
    methods: {
        initDraw () {
            if (this.params) {
                this.drawData.views[4].url = this.params.qrcode
            }
        },
        success (src) {
            this.$emit('createCanvas', src)
        },
        fail (err) {
            console.log('fail', err)
            this.$toast('海报生成初始化异常')
        }
    },
    watch: {
        params: {
            handler (n, o) {
                this.initDraw()
            },
            deep: true
        }
    }
}
</script>

<style lang="less" scoped>
</style>
